<template>
	<div class="index">

    <el-dialog title="设置显示的字段" :visible.sync="log" width="440px">
        <div style="padding: 10px; margin-bottom: 10px; text-align: center; background: #ecf5ff;">可拖动调整顺序</div>

        <Draggable v-model="lie" @end="ends">
          <div v-for="item in lie" :key="item.value" class="tli">
            <el-checkbox v-model="item.xianshima" style="margin-right: 20px;"></el-checkbox>
            {{item.name}}
          </div>
        </Draggable>
    	  <!-- <div>
          <el-checkbox-group v-model="xianshideziduan" @change="changexianshideziduan">
              <el-checkbox :label="item.name" v-for="item in arrs" :key="item.value"></el-checkbox>
          </el-checkbox-group>
        </div> -->
    	  <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="queren">确定</el-button>
    	  </span>
    </el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	import Draggable from "vuedraggable"

	export default{
		components: {
			Draggable
		},
    props:['xianshideziduan2'],
		name: 'index',
		data(){
			return{
        log:true,
        xianshideziduan:[],
        peizhis:"",
        lie:[
          // {name:"订单数量",value:"amount",xianshima:true},
          // {name:"审核通过",value:"approval_amount",xianshima:true},
          // {name:"审核通过率",value:"tongguolv",xianshima:true},
          // {name:"提单成功数",value:"submit_amount",xianshima:true},
          // {name:"提单成功率",value:"tidanlv",xianshima:true},
          // {name:"发货数",value:"deliver_amount",xianshima:true},
          // {name:"发货率",value:"fahuolv",xianshima:true},
          // {name:"生产失败数",value:"fail_amount",xianshima:true},
          // {name:"生产失败率",value:"shengchanshibailv",xianshima:true},
          // {name:"激活数",value:"active_amount",xianshima:true},
          // {name:"激活且充值数",value:"recharge_amount",xianshima:true},
          // {name:"充值率",value:"chongzhilv",xianshima:true},
          // {name:"激活率",value:"jihuolv1",xianshima:true},

          // {name:"实际交易额",value:"shijijiaoyie",xianshima:true},
          // {name:"推广费用",value:"tuiguangfeiyong",xianshima:true},
          // {name:"其他费用",value:"qitafeiyong",xianshima:true},
          // {name:"预估佣金",value:"yuguchengben",xianshima:true},
          // {name:"发货成本",value:"fahuochengben",xianshima:true},
          // {name:"激活成本",value:"jihuochengben",xianshima:true},

          {name:"订单数量",value:"amount",xianshima:true,tex:""},
          {name:"审核通过",value:"approval_amount",xianshima:true,tex:"订单通过了初步审核"},
          {name:"审核通过率",value:"tongguolv",xianshima:true,tex:"订单通过初步审核的占比"},
          {name:"提单成功数",value:"submit_amount",xianshima:true,tex:"订单成功提交给上游接口或人工导出订单后订单状态变更为：已领取"},
          {name:"提单成功率",value:"tidanlv",xianshima:true,tex:"提单成功数/订单总数"},
          {name:"发货数",value:"deliver_amount",xianshima:true,tex:"已发货的订单数量"},
          {name:"发货率",value:"fahuolv",xianshima:true,tex:"发货数/总订单数"},
          {name:"初审失败数",value:"approval_fail_amount",xianshima:true,tex:"初审失败的订单数量"},
          {name:"生产失败数",value:"fail_amount",xianshima:true,tex:"生产失败的订单数量"},
          {name:"生产失败率",value:"shengchanshibailv",xianshima:true,tex:"初审失败数+生产失败数/总订单数"},

          {name:"激活数",value:"active_amount",xianshima:true,tex:"订单状态为已激活和激活且充值的订单总数"},
          {name:"激活且充值数",value:"recharge_amount",xianshima:true,tex:"订单状态为激活且充值的订单数"},
          {name:"充值率",value:"chongzhilv",xianshima:true,tex:"激活且充值的订单数/激活订单数"},
          {name:"激活率",value:"jihuolv1",xianshima:true,tex:"激活数/订单总数"},
          // {name:"激活率（按订单）",value:"jihuolv1"},
          {name:"激活率（按发货）",value:"jihuolv2",xianshima:true,tex:"激活数/发货数"},
          // {name:"激活率（按退款）",value:"jihuolv3"},
          {name:"实际交易额",value:"shijijiaoyie",xianshima:true,tex:"用户为订单支付的金额"},
          // {name:"推广费用",value:"tuiguangfeiyong",xianshima:true,tex:""},
          // {name:"其他费用",value:"qitafeiyong",xianshima:true,tex:""},
          // {name:"预估佣金",value:"yuguchengben",xianshima:true,tex:"预计每个订单合格结算后的佣金收入"},
          // {name:"发货成本",value:"fahuochengben",xianshima:true,tex:""},
          // {name:"激活成本",value:"jihuochengben",xianshima:true,tex:""},
        ]
			}
		},
		created() {
      if(this.xianshideziduan2 != ''){

        this.lie = JSON.parse(JSON.stringify(this.xianshideziduan2))
        // this.xianshideziduan = this.xianshideziduan2

        // this.xianshideziduan.forEach(item2=>{
        //   if(item2.value){
        //      this.lie.forEach(item=>{
        //        item.xianshima = false
        //      })
        //   }
        // })

        // this.lie.forEach(item=>{
        //   this.xianshideziduan.forEach(item2=>{
        //     if(item.value == item2.value){
        //       item.xianshima = item2.xianshima
        //     }
        //   })
        // })
      }

		},
		methods:{
      ends:function(){

      },
      queren:function(){
        // let arr = this.lie.filter(item=>{
        //   return item.xianshima
        // })

        this.$emit('xianshideshuju',this.lie)
        this.$nextTick(()=>{
          this.$emit('tuozhuaishowclose')
        })

      }
		}
	}
</script>

<style lang="scss" scoped>
	.index{
    /deep/ .el-dialog__body{ padding-top: 0;}
    .tli{padding: 10px 40px; font-size: 14px;  display: flex; align-items: center; cursor: pointer;
      &:hover{ background: url('../../../../static/kuanping/diandian.png') no-repeat #eaeaea 10px center; background-size: 10px;}
    }
    /deep/ .sortable-chosen{ background: #eef7ff;}
	}
</style>
